<template>
  <div class="home confirmAttendance">
    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" width="55" label="序号" align="center">
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="servicesCompany"
          label="劳务公司名称"
        >
          <template>
            <div>
              {{ transfer.corpName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="team"
          label="班组名称"
        >
          <template>
            <div>
              {{ transfer.teamName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="name"
          label="人员姓名"
        >
        </el-table-column>
        <el-table-column header-align="center" align="center" label="出勤时间">
          <template slot-scope="scope">
            <div>
              {{ scope.row.startTime.substr(0, 5) }}至{{
                scope.row.endTime.substr(0, 5)
              }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column header-align="center" align="center" label="合计">
          <template>
            <div>{{ attendanceInfo.count }}小时</div>
          </template>
        </el-table-column> -->
        <el-table-column
          header-align="center"
          align="center"
          prop="settlement"
          label="结算"
        >
        <template slot>
          <div>人工导入</div>
        </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <div>
              <el-button
                type="text"
                @click="adjustItem(scope)"
                icon="el-icon-edit"
                >调整</el-button
              >
              <el-button
                type="text"
                @click="deleteItem(scope.$index)"
                icon="el-icon-delete"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="block-space"></div> -->
      <el-row class="page">
        <div class="page-tag">
          共{{ Math.ceil(totalData / pageSize) }}页/{{ totalData }}条数据
        </div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          layout="sizes, prev, pager, next, jumper"
          :total="totalData"
        >
          >
        </el-pagination>
      </el-row>
    </div>
    <div
      class="main-title row"
      style="
        background-color: #ffffff;
        border-top: solid 1px #e4e4e4;
        margin-top: 10px;
      "
    >
      <div style="width: 100%; text-align: right; margin-right: 20px">
        <el-button class="sub-btn" type="info" @click="cancle">上一步</el-button>
        <el-button class="sub-btn color-1abc9c" @click="next">完成</el-button>
      </div>
    </div>
    <!-- 调整弹窗 -->
    <el-dialog
    width="600px"
      class="small-dialog"
      title="调整考勤"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="dialogForm" :inline="true" :rules="dialogFormRules">
        <el-form-item label-width="120px" label="考勤开始时间：" prop="startTime">
          <el-time-picker
            v-model="dialogForm.startTime"
            type="datetime"
            placeholder="选择开始时间"
            value-format="HH:mm:ss"
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item label-width="120px" label="考勤结束时间：" prop="endTime">
          <el-time-picker
            v-model="dialogForm.endTime"
            type="datetime"
            placeholder="选择结束时间"
            value-format="HH:mm:ss"
          >
          </el-time-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmDialog">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import eventBus from "../eventBus";
import { insertAttendance } from "@/api/attendance";
export default {
  props: ["personnelList"],
  data() {
    return {
      tableData: this.personnelList,
      attendanceInfo: {
        startTime: "",
        endTime: "",
        date: null,
      },
      selectedList: [],
      currentPage: 1,
      // totalPage:50,
      pageSize: 10,
      totalData: 0,
      transfer: {
        corpId: null,
        corpName: null,
        teamId: null,
        teamName: null,
      },
      insertArray: [
        {
          startTime: "",
          endTime: "",
        },
      ],
      dialogFormVisible: false,
      dialogForm: {
        startTime: null,
        endTime: null,
      },
      dialogFormRules: {
        startTime: [
          { required: true, message: "请选择考勤开始时间", trigger: "blur" },
        ],
        endTime: [
          { required: true, message: "请选择考勤结束时间", trigger: "blur" },
        ],
      },
      index: null,
    };
  },
  mounted() {
    // 通过事件总线监听消息

    eventBus.$on("personnelList", (res) => {
      // console.log(res);
      this.tableData = res;
      this.totalData = res.length;
    });
    // eventBus.$on("attendanceInfo", (res) => {
    //   // console.log(res);
    //   this.attendanceInfo = {
    //     startTime: res.startTime,
    //     endTime: res.endTime,
    //     date: res.date,
    //   }
    // });
    eventBus.$on("transfer", (res) => {
      // console.log("personnelList"+res);
      this.transfer = res;
    });
  },
  // watch: {
  //   tableData(newV, oldV) {
  //     // watch监听props里status的变化，然后执行操作
  //      console.log(newV, oldV)
  //     this.tableData = newV;
  //   },
  // },
  methods: {
    handleSizeChange() {},
    cancle() {
      this.$emit("getActive", 1);
    },
    next() {
      this.$emit("getActive", 3);
      let array = [];
      this.tableData.forEach((e) => {
        array.push({
          endTime: e.date+" "+e.endTime,
          personId: e.id,
          startTime: e.date+" "+e.startTime,
        });
      });
      console.log(array)
      insertAttendance(array).then((res) => {
        // console.log(res);
        this.$message({
          type:'success',
          message:'添加成功！'
        })
        this.$router.push({path:"/attendance/daily/statistic"})
      }).catch(res=>{
        this.$message({
          type:'error',
          message:res.message
        })
      })
    },
    //   获取当前页数据
    getCPageData(data) {
      //   getPaymentList(data).then((res) => {
      // this.totalData = res.data.data.total;
      // console.log(res)
      // this.tableData = res.data.data.records;
      //   });
    },
    //更改当前页
    handleCurrentChange() {
      // console.log(this.currentPage);
      this.getCPageData({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      });
    },
    adjustItem(data) {
      this.dialogFormVisible = true;
      // console.log(this.insertArray[index]);
      this.dialogForm.startTime = data.row.startTime;
      this.dialogForm.endTime = data.row.endTime;
      this.index = data.$index;
    },
    deleteItem(index) {
      this.tableData.splice(index, 1);
    },
    confirmDialog() {
      this.tableData[this.index].startTime = this.dialogForm.startTime;
      this.tableData[this.index].endTime = this.dialogForm.endTime;
      // console.log(this.tableData)
      // this.tableData = this.tableData
      this.$set(this.tableData,this.index,this.tableData[this.index]);
      this.dialogFormVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.confirmAttendance {
  padding-top: 20px;
  background-color: #ffffff;
  text-align: center;
  padding-bottom: 20px;
  .table {
    width: 90%;
    margin: 0 auto;
    // border: solid 1px #e4e4e4;
    position: relative;
    .block-space {
      width: 100%;
      height: 50px;
    }
    // .list-block {
    //   position: absolute;
    //   bottom: 0;
    //   width: 100%;
    //   height: 50px;
    //   text-align: right;
    //   background-color: #ffffff;
    //   padding-top: 10px;
    //   //   border: solid 1px #e4e4e4;
    //   padding-right: 10px;
    //   justify-content: flex-end;
    //   .page-tag {
    //     font-size: 13px;
    //     line-height: 30px;
    //     min-width: 120px;
    //   }
    // }
  }
}
</style>
